<template>
  <div id="app">
    <div class="tabs flex-box flex-top">
      <div
        v-for="(tab, index) in tabs"
        :class="['tab flex-box', { active: index === activeTab }]"
        @click="activeTab = index"
      >
        {{ tab }}
      </div>
    </div>

    <div v-show="activeTab === 0" class="config-box">
      <div class="body">
        <template v-for="item in dataList">
          <my-item
            v-if="!item.hiddenConfig"
            style="margin-bottom: 10px"
            class="w-100"
            :key="item.key"
            :label="item.label"
            :text="configs[item.key]"
          >
            <input
              :type="item.type === 'img' ? 'file' : 'text'"
              style="width: 100%; height: 28px"
              v-model="configs[item.key]"
              @change="handelUpload($event, item.key)"
            />
            <input
              type="text"
              v-if="item.desc"
              style="width: 100%; height: 28px"
              v-model="item.desc"
            />
          </my-item>
        </template>
      </div>
    </div>

    <div v-show="activeTab === 1" class="preview-box" ref="canvasDom">
      <!-- <div class="header">
        <div class="ios_dark__xD2Wv">
          <div class="ios_bar__FwgZR transfer_statusBar__OUM62">
            <div class="ios_left__1nZY1">
              <span class="ios_time__0LqhN">12:22</span>
            </div>
            <div class="ios_center__gPbuk"></div>
            <div class="ios_right__exYx6">
              <div class="ios_singleGroup__MNWg_">
                <span class="ios_single__q_T_A"></span>
                <span
                  class="ios_single__q_T_A ios_single2__yxQg_ ios_single2-2__mVLl3"
                ></span>
              </div>
              <div class="ios_network__dDJV3">5G</div>
              <div class="ios_battery__C3gBw">
                <span><em style="width: 85%">电量</em><i>85</i></span>
              </div>
            </div>
          </div>
        </div>
      </div> -->
      <div class="body">
        <img src="./assets/images/left-close.f902f318.png" class="left-close" />

        <div class="body_1 flex-box flex-column">
          <img class="logo" v-if="activeTab === 1" :src="logo" alt="" />
          <div class="name">
            {{ configs.merchantName }}
          </div>
          <div class="price flex-box">
            <img
              style="height: 20px; margin: 0; margin-right: -2px"
              src="./assets/images/minus.png"
            />
            <em>{{ `${(configs.price / 100).toFixed(2)}` }} </em>
          </div>
        </div>

        <div class="body_2">
          <template v-for="item in dataList">
            <my-item
              style="margin-bottom: 8px; color: #191919"
              class="w-100"
              v-if="!item.hiddenPreview"
              :key="item.key"
              :label="item.label"
              :text="configs[item.key]"
              :desc="item.desc"
            >
            </my-item>
          </template>
        </div>
      </div>
      <div class="footer flex-box">
        <vue-barcode
          textAlign="center"
          :height="56"
          lineColor="#191919"
          :value="configs.barcode"
          format="CODE128"
          fontSize="16"
        ></vue-barcode>
      </div>
      <div class="sub-box">
        <my-item label="账单服务" lablelColor="#191919"></my-item>
      </div>
    </div>

    <div class="flex-box">
      <button type="button" @click="handleExport">导出</button>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import html2canvas from "html2canvas";
import VueBarcode from "vue-barcode";
import MyItem from "./components/my-item.vue";

export default {
  name: "App",
  components: {
    MyItem,
    VueBarcode,
  },
  data() {
    return {
      activeTab: 1,
      tabs: ["配置", "预览"],
      configs: {
        merchantName: "北京金鑫优品酒店",
        price: "13000",
        logo: "",
        Base64Val: "",
        status: "支付成功",
        payTime: moment().format("YYYY年M月D日 HH:mm:ss"),
        goods: "金鑫优品酒店天鹅付押金",
        merchantFullName: "北京数字可乐文化传媒有限公司",
        rechargeStructure: "上海富友支付服务股份有限公司",
        payMethod: "零钱",
        orderNo: `4200066319${moment().format("YYYYMMDD")}${parseInt(
          1000000000 * Math.random()
        )}`,
        merchantNo: "可在支持的商户扫码退款",
        barcode: "166502024091618164029104789696",
      },
      // 当前状态 支付时间 商品 商户全称 收单机构 支付方式  交易单号 商户单号
      dataList: [
        {
          label: "商户名",
          key: "merchantName",
          hiddenPreview: true,
        },
        {
          label: "价格",
          key: "price",
          hiddenPreview: true,
        },
        {
          label: "logo",
          key: "logo",
          type: "img",
          hiddenPreview: true,
        },
        {
          label: "logo",
          key: "Base64Val",
          type: "img",
          hiddenConfig: true,
          hiddenPreview: true,
        },
        {
          label: "当前状态",
          key: "status",
        },
        {
          label: "支付时间",
          key: "payTime",
        },
        {
          label: "商品",
          key: "goods",
        },
        {
          label: "商户全称",
          key: "merchantFullName",
        },
        {
          label: "收单机构",
          key: "rechargeStructure",
          desc: "由中国银联股份有限公司提供收款清算服务",
        },
        {
          label: "支付方式",
          key: "payMethod",
        },
        {
          label: "交易单号",
          key: "orderNo",
        },
        {
          label: "商户单号",
          key: "merchantNo",
        },
        {
          label: "条形码",
          key: "barcode",
          hiddenPreview: true,
        },
      ],
    };
  },
  computed: {
    logo() {
      if (this.configs.logo) {
        return this.configs.logoBase64;
      } else {
        return require("./assets/images/WechatIMG126.jpg");
      }
    },
  },
  methods: {
    handelUpload(e, key) {
      if (key === "logo") {
        const file = e.target.files[0];
        let fileType = file.type;
        if (!["image/png", "image/jpg", "image/jpeg"].includes(fileType)) {
          alert("请上传正确的图片，仅限png、jpg、jpeg");
          return;
        }
        if (file.size > 5 * 1024 * 1024) {
          alert("请选择5M以内的图片");
          return;
        }
        if (typeof FileReader === "function") {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = (event) => {
            let Base64Val = event.target.result;
            this.configs.logoBase64 = Base64Val;
          };
        } else {
          alert("对不起，您的浏览器暂不支持此功能！");
        }
      }
    },
    handleExport() {
      const canvasDom = this.$refs.canvasDom;

      html2canvas(canvasDom, {
        dpi: 300, // 解决生产图片模糊
        useCORS: false,
        allowTaint: false,
        logging: false,
      })
        .then((canvas) => {
          const canvasImg = canvas.toDataURL("image/png");
          const a = document.createElement("a");
          a.href = canvasImg;
          a.download = "微信支付截图";
          a.click();
        })
        .catch(() => {
          alert("您的设备不支持导出图片");
        });
    },
  },
};
</script>

<style lang="less">
body {
  margin: 0;
  padding: 0;
}

#app {
  font-size: 12px;
  font-family: SF Pro, PingFang SC;
}

.tabs {
  .tab {
    height: 44px;
    min-width: 80px;
    background: #dfdfdf;
    cursor: pointer;

    &.active {
      color: #fff;
      background: #52dd23;
    }
  }
}

.config-box {
  padding: 81px 15px;
}

.preview-box {
  background: #e5e5e5;

  .header {
    padding: 0 15px;
    font-family: SF Pro, PingFang SC;
    -webkit-font-smoothing: antialiased;

    .ios_dark__xD2Wv {
      background-color: #ededed;
      position: relative;
    }

    .ios_dark__xD2Wv .ios_bar__FwgZR {
      // height: 123px;
      align-items: center;
      display: flex;
      // padding: 0 43px 0 95px;
    }

    .transfer_statusBar__OUM62 {
      background: #fff !important;
    }

    .ios_dark__xD2Wv .ios_left__1nZY1 {
      flex: 1 1;
      display: flex;
      align-items: center;
    }

    .ios_dark__xD2Wv .ios_time__0LqhN {
      font-weight: 500;
    }

    .ios_dark__xD2Wv .ios_center__gPbuk {
      flex: 1 1;
    }

    .ios_dark__xD2Wv .ios_right__exYx6 {
      display: flex;
      align-items: center;
    }

    .ios_dark__xD2Wv .ios_singleGroup__MNWg_ {
      // margin-left: 15px;
      display: flex;
      flex-direction: column;
    }

    .ios_dark__xD2Wv .ios_singleGroup__MNWg_ .ios_single__q_T_A {
      height: 9px;
      width: 20px;
      margin-left: 0;
      background: url(./assets/images/ios-single-1-double-dark.fb0dc8cc.png)
        no-repeat;
      background-size: 100% 100%;
    }

    .ios_dark__xD2Wv .ios_singleGroup__MNWg_ .ios_single2-2__mVLl3 {
      background: url(./assets/images/ios-single-2-double2-dark.155f65d8.png)
        no-repeat;
    }
    .ios_dark__xD2Wv .ios_singleGroup__MNWg_ .ios_single2__yxQg_ {
      width: 20px;
      height: 4px;
      background: url(./assets/images/ios-single-1-double2-dark.caa5c67e.png)
        no-repeat;
      background-size: 100% 100%;
    }

    .ios_dark__xD2Wv .ios_network__dDJV3 {
      font-size: 12px;
      font-weight: 500;
      text-align: center;
      margin-left: 7.5px;
    }

    .ios_dark__xD2Wv .ios_battery__C3gBw {
      background: url(./assets/images/ios-battery-dark.aa2825c5.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      height: 14px;
      width: 28px;
      margin-left: 7.5px;
      position: relative;
      flex-direction: column;
      align-items: center;
    }

    .ios_dark__xD2Wv .ios_battery__C3gBw span {
      margin-right: 5px;
      flex: 1 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 7px;
      position: relative;
    }

    .ios_dark__xD2Wv .ios_battery__C3gBw span em {
      display: flex;
      flex: 1 1;
      background-color: #000;
      text-indent: -9999px;
    }

    .ios_dark__xD2Wv .ios_battery__C3gBw span i {
      display: flex;
      align-items: center;
      font-size: 10px;
      font-weight: 500;
      position: absolute;
      width: 100%;
      height: 100%;
      font-style: normal;
      color: #fff;
      justify-content: center;
    }
  }

  .body {
    background: #fff;
    position: relative;

    .left-close {
      position: absolute;
      width: 18px;
      top: 10px;
      left: 10px;
    }

    &_1 {
      margin-bottom: 15px;
      margin: 0 auto;
      padding-top: 50px;
      padding-bottom: 42px;
      position: relative;

      .logo {
        width: 43px;
        margin: 0;
        border-radius: 50%;
      }

      .name {
        margin-top: 12px;
        font-size: 16px;
        text-align: center;
        font-weight: 400;
      }

      .price {
        text-align: center;
        margin-top: 18px;
        font-size: 28px;

        em {
          font-style: normal;
          font-family: WeChatNum;
        }
      }
    }

    &_2 {
      padding: 0px 26px;
      margin-top: 20px;
      position: relative;
      padding-top: 6px;
      padding-bottom: 5px;

      &::before {
        position: absolute;
        height: 1px;
        content: "";
        top: -20px;
        left: 26px;
        right: 26px;
        background: #e1e1e1;
        // transform: scaleY(0.5);
      }
    }
  }
  .footer {
    background: #fff;
    padding: 0 16px;
    padding-bottom: 36px;

    .vue-barcode-element {
      width: 100% !important;

      text {
        font-family: SF Pro, PingFang SC !important;
      }
    }
  }

  .sub-box {
    background: #fff;
    margin-top: 10px;
    padding: 15px 26px 18px 26px;
    margin-bottom: 10px;
    position: relative;

    &::after {
      position: absolute;
      height: 1px;
      content: "";
      bottom: 4px;
      left: 26px;
      right: 26px;
      background: #e1e1e1;
      // transform: scaleY(0.5);
    }
  }
}
</style>
